<template>
  <p>{{ text }}</p>
</template>
<script>
//引入computed方法
import {reactive, computed} from 'vue'
export default{
  name: 'App',
  setup(){
    //声明一个reactive响应式对象
    const state = reactive({
      name:'陈尼克',
      desc:'你好'
    })
    //computed接收一个回调函数，将回调函数的返回值赋给text变量
    const text = computed(() =>{
      console.log('执行computed')
      return state.name + state.desc
    })
    //2秒后修改state.name的值
    setTimeout(() => {
      state.name = '李尼克'
    }, 2000)
    return {
      text
    }
  }
}
</script>